<!doctype html>
<html>

	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="../css/mui.min.css" rel="stylesheet" />
		<style type="text/css">
 			/* checkbox的样式 */
            .mui-checkbox.checked input[type=checkbox]:checked:before {
                color: green;
            }
            /* checkbox的样式 */
            .mui-checkbox.wrong input[type=checkbox]:checked:before {
                color: red;
            }
		</style>
	</head>

	<body>
		<header id="header" class="mui-bar mui-bar-nav">
			<button class="mui-action-back mui-btn mui-btn-blue mui-btn-link mui-btn-nav mui-pull-left">
				<span class="mui-icon mui-icon-left-nav" style="font-size:larger;">退出考试</span>
			</button>
			<h4 class="mui-title mui-pull-left" id="labTime">导航栏</h4>
			<button class="mui-btn mui-btn-blue mui-btn-link mui-pull-right" id="btnSubmit">交卷</button>
		</header>
		<div class="mui-content">
			<div class="mui-content-padded">
				<span style="color:green; font-weight: bold;" v-html="question.Type">[多选题]</span>
				<span v-html="question.Title">开办药品生产企业，必须具备的条件是（      ）。</span>
			</div>
			<!--<ul class="mui-table-view">
				<li class="mui-table-view-cell mui-media">
					<div class="mui-media-body mui-checkbox wrong" style="min-height: 32px; ">
						<label>A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="checkbox" name="checkbox1" checked="checked" style="margin-top: -5px;">
					</div>
				</li>
				<li class="mui-table-view-cell mui-media">
					<div class="mui-media-body mui-checkbox" style="min-height: 32px;">
						<label>A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="checkbox" name="checkbox1" style="margin-top: -5px;">
					</div>
				</li>
				<li class="mui-table-view-cell mui-media">
					<div class="mui-media-body mui-radio" style="min-height: 32px;border: solid red 0px;">
						<label>A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="radio" name="radio1" style="margin-top: -5px;">
					</div>
				</li>
				<li class="mui-table-view-cell mui-media">
					<div class="mui-media-body mui-radio wrong" style="min-height: 32px;">
						<label>A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="radio" name="radio2" checked="checked" style="margin-top: -5px;">
					</div>
				</li>
			</ul>-->
			<ul class="mui-table-view" v-for="item in options">
				<li class="mui-table-view-cell mui-media">
					<div v-bind:class="item.class" style="min-height: 32px;">
						<label v-html="item.value">A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="checkbox" v-bind:value="item.name" name="checkbox1" v-model="item.checked" v-on:click="clickitem(item)" v-bind:disabled="item.disabled" style="margin-top: -5px;">
					</div>
				</li>
				<!--<li class="mui-table-view-cell mui-media" v-if="question.Type=='单选题'">
					<div v-bind:class="item.class" style="min-height: 32px;border: solid red 0px;">
						<label v-html="item.value">A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="radio" v-bind:value="item.name" name="radio1"  v-model="item.checked" v-on:click="clickitem(item)"  v-bind:disabled="item.disabled" style="margin-top: -5px;">
					</div>
				</li>
				<li class="mui-table-view-cell mui-media" v-if="question.Type=='判断题'">
					<div v-bind:class="item.class" style="min-height: 32px;">
						<label v-html="item.value">A.具有依法经过资格认定的药学技术人员、工程技术人员及相应的技术工人</label>
						<input type="radio" v-bind:value="item.name" name="radio2" v-model="item.checked" v-on:click="clickitem(item)" v-bind:disabled="item.disabled" style="margin-top: -5px;">
					</div>
				</li>-->
			</ul>
			<div class="mui-button-row" v-if="question.Type=='多选题'" style="margin-top: 10px;">
				<button type="button" class="mui-btn mui-btn-primary" v-on:click="checkresult()">确认结果</button>
			</div>
			
			<div class="mui-content-padded" style="visibility: visible;" id="divDetails">
				<br>
				<div class="mui-row" style="text-align: center;">---- 详情 ----</div>
				<br>
				<div class="mui-row">
					&nbsp;&nbsp;&nbsp;&nbsp;
					<label v-html="question.Details">
					采用webView的方式来进行Tab切换，代码有点多，可以拷贝官方文档，进行局部修改，其实只要修改subpages即可，主要要和mTab中的设置要一致，否则会报告错误，因为名字错了，就无法找到文件资源，也就无法初始化了。
					</label>
				</div>
			</div>
			<div class="mui-row" style="min-height: 42px;">&nbsp;</div>	
		</div>
		<nav class="mui-bar mui-bar-tab" style="text-align: center;">
			<div class="mui-pull-left" style="margin-left: 10px;">
				<button type="button" class="mui-btn mui-btn-default" id="btnPrevious">上一题</button>
			</div>
			<div class="mui-pull" style="border: solid red 0px;">
				<span style="color:blue" id="labRight">0</span> / <span style="color: red;" id="labWrong">0</span> / <span id="labCurrent" style="color: black;">1</span> / <span id="labTotal">3200</span>
			</div>
			<div class="mui-pull-right" style="margin-right: 10px;">
				<button type="button" class="mui-btn mui-btn-default" id="btnNext">下一题</button>
			</div>
		</nav>
		<script src="../js/mui.min.js"></script>
		<script type="text/javascript" src="../js/vue.min.js" ></script>
		<script type="text/javascript" src="../js/app.js?v=20190613" ></script>
		<script type="text/javascript">
			mui.init()
			var vm = new Vue({
				el: '.mui-content',
				data: {
					time:2700,
					rows:10,
					page:1,
					total:0,
					records:0,
					readIndex:0,
					options:[],
					checked:[],
					right:0,
					wrong:0,
					ExamRecord: {
						"Id": "9eb4ca35-b7e9-4871-8d27-907e46ef6fc4",
						"Code": "",
						"RefExamId": "",
						"ExamCode": "",
						"RefItemId": "",
						"ItemName": "",
						"ExamMode": "",
						"ExamSite": "",
						"RefPersonId": "",
						"PersonName": "",
						"RefCorpId": "",
						"CorpName": "",
						"ExamYear": null,
						"StartTime": "2019-06-13 14:47:34",
						"CloseTime": null,
						"UsedTime": "",
						"ExamGrade": null,
						"QualifiedGrade": null,
						"ExamResult": "",
						"Remark": "",
					},/*考核信息*/
					ExamQuestions: [],
					question:{
						"Id": "",
						"RefRecordId": "",
						"RefCorpId": "",
						"RefPersonId": "",
						"RefExamId": "",
						"ExamCode": "",
						"Index": 1,
						"RefQuestionId": "adf87866-9db5-432a-8a5c-669f2b13ab98",
						"RefItemId": "",
						"Title": "国家食品药品监督管理局核发的药品批准文号、《进口药品注册证》或者《医药产品注册证》的有效期为（ ）年。",
						"Type": "单选题",
						"Options": "A.3 \nB.4 \nC.5 \nD.6",
						"Answer": "A",
						"Score": null,
						"Details": "试题详解",
						"ReplyDesc": "",
						"ReplyResult": "",
						"ReplyScore": null,
						"Remark": "",
					}
				},
			});
			
			mui.plusReady(function(){
				/*读取试题*/
				vm.question = {};
				/*采用直接传值方式，避免加载数据时，浪费时间。*/
				var simulate = app.getSimulate();
				console.log("simulate="+JSON.stringify(simulate));
				vm.ExamRecord = simulate.ExamRecord;
				vm.ExamQuestions = simulate.ExamQuestions;
				
				document.getElementById("labTotal").innerHTML = vm.ExamQuestions.length;
				document.getElementById("labRight").innerHTML = "0";
				document.getElementById("labWrong").innerHTML = "0";
				if(vm.ExamQuestions.length > 0)
				{
					loadContent(0);
				}
				
				var btnPrevious = document.getElementById("btnPrevious");
				btnPrevious.addEventListener('tap', function(event) {
					console.log(JSON.stringify(this.options));
					if(vm.readIndex <= 0)
					{
						mui.toast("已是第一题，没有更多内容！");
						return;
					}
					var readIndex = vm.readIndex -1;
					loadContent(readIndex);
				});
				
				var btnNext = document.getElementById("btnNext");
				btnNext.addEventListener('tap', function(event) {
					loadNext();
				});
				var btnSubmit = document.getElementById("btnSubmit");
				btnSubmit.addEventListener('tap', function(event) {
					saveSubmit();
				});
				/*计时与到时控制*/
				document.getElementById("labTime").innerText = "45:00";
				var interval = setInterval(function(){
					vm.time = vm.time - 1;
					var minute = parseInt(vm.time / 60);
					var second = vm.time - (minute * 60);
					
					if(vm.time <= 60){
						document.getElementById("labTime").innerHTML = "<lable style='color:red'>"+minute +":"+ second+"</lable>";
					}
					else
						document.getElementById("labTime").innerText =minute +":"+ second;
						
					if(vm.time <= 0){
						clearInterval(interval);
						mui.toast("时间到！");
					}
				},1000);
				
			});
			
			/*点击某个结果*/
			function clickitem(quest){
				console.log("item="+JSON.stringify(quest));
				/*不是多选时，选中一个结果，即进行检查结果*/
				if(vm.question.Type != "多选题"){
					checkresult();
					
					/*自动跳转下一题*/
//					var temp = vm.readIndex < vm.ExamQuestions.length -1;
//					console.log("加载下一题:"+temp);
//					if(temp== true){
//						loadNext()
//					}
				}
			}
			function checkresult(){
				var current = vm.ExamQuestions[vm.readIndex];
				/*是否已检查过结果*/
				if(current != undefined
					&& current.ReplyResult != undefined && current.ReplyResult != ""){
					return;
				}
				var result = "";
				mui.each(vm.options, function (index, item) {
					if(item.checked == true){
						result = result +""+ item.name;
						item.class = "mui-media-body mui-checkbox checked";/*选中值*/
						
						if(item.answer == "-1"){
							item.result = "选错";/*结果*/
							item.class = "mui-media-body mui-checkbox wrong";
						}
					}
					/*正确选项*/
					if(item.answer == "1")
						item.checked = true;
				});
				
				if(result == "")
					return;
				
				if(vm.ExamRecord.QuestionRight == undefined)
					vm.ExamRecord.QuestionRight = 0;
					
				if(vm.ExamRecord.QuestionWrong == undefined)
					vm.ExamRecord.QuestionWrong = 0;
				
				current.ReplyDesc = result;
				if(result == vm.question.Answer){
					vm.ExamRecord.QuestionRight = vm.ExamRecord.QuestionRight + 1;
					current.ReplyResult = "正确";
				}
				else
				{
					vm.ExamRecord.QuestionWrong = vm.ExamRecord.QuestionWrong + 1;
					current.ReplyResult = "错误";
				}
				/*有结果后，所有选项，不允许修改*/
				mui.each(vm.options, function (index, item) {
					item.disabled = true;
				});
				document.getElementById("labRight").innerHTML = vm.ExamRecord.QuestionRight;
				document.getElementById("labWrong").innerHTML = vm.ExamRecord.QuestionWrong;
				document.getElementById("divDetails").style.visibility="visible";
			}
			function loadNext(){
				console.log("readindex="+vm.readIndex + " vm.ExamQuestions.length="+vm.ExamQuestions.length);
				if(vm.readIndex >= vm.ExamQuestions.length -1){
					mui.toast("已是最后一题，没有更多内容！");
					return;
				}
				var readIndex = vm.readIndex + 1;
				loadContent(readIndex);
			}
			function loadContent(readIndex){
				vm.readIndex = readIndex;
				
				vm.question = vm.ExamQuestions[readIndex];
				
				console.log(JSON.stringify(vm.question));
				vm.options = [];
				var options = vm.question.Options.split('\n');
				//console.log("options.length="+options.length);
				/*获取用户考试题目记录*/
				//var simulate = app.getSimulate(vm.question.Id);
				//console.log("simulate="+JSON.stringify(simulate));
				for(var index=0;index < options.length;index++){
					var field = options[index].split('.');
					var obj = {};
					if(field.length > 0){
						obj.name = field[0];
						obj.value = options[index];
					}
					else
					{
						obj.name = options[index];
						obj.value = options[index];
					}
					/*是否需要选中*/
					if(vm.question.Answer.indexOf(obj.name) >= 0)
						obj.answer = "1";
					else
						obj.answer = "-1";
					obj.result = "";/*结果*/
					obj.class = "mui-media-body mui-checkbox";
						
					if(vm.question.ReplyDesc != undefined && vm.question.ReplyDesc != "")
					{
						obj.disabled = true; /*已选结果，不允许再修改*/
						
						var temp = vm.question.ReplyDesc.indexOf(obj.name);
						console.log("temp ="+temp)
						if(temp >= 0){
							obj.checked = true;
							obj.class = "mui-media-body mui-checkbox checked";
							
							if(obj.answer == "-1")
							{
								obj.result = "选错";/*结果*/
								console.log("选错="+temp)
								obj.class = "mui-media-body mui-checkbox wrong";
							}
						}
						else
						{
							obj.checked =(obj.answer == "1");
						}
					}
					else
					{
						obj.checked = false;
					}
					vm.options.push(obj);
				}
				
				console.log(JSON.stringify(vm.options));
				document.getElementById("labCurrent").innerHTML = readIndex + 1;
				/*已答时，详情可见*/
				var temp = (vm.question.ReplyDesc != undefined && vm.question.ReplyDesc != "");
				if(temp == true){
					console.log("replydesc="+vm.question.ReplyDesc);
					console.log("temp="+temp);
					document.getElementById("divDetails").style.visibility="visible";
				}
				else
					document.getElementById("divDetails").style.visibility="hidden";
			}
			function saveSubmit(){
				
				var examRecord = vm.ExamRecord;
				var examDetails = vm.ExamQuestions;
				
				/*加载数据*/
				var setting = app.getSetting();
				var ajaxUrl = setting.ServerUrl +"/api/PeopleExamRecord/SaveSubmit";
				console.log(ajaxUrl);
				plus.nativeUI.showWaiting("正在保存数据，请稍候...");
//				var formData = new FormData();
//				formData.append("ExamRecord",vm.ExamRecord);
//				formData.append("ExamDetails",examDetails);
				var formData = {
					ExamRecord:examRecord,
					ExamDetails:examDetails
				};
				console.log(""+JSON.stringify(examDetails));
				
				mui.ajax(ajaxUrl,{
					dataType:'json',//服务器返回json格式数据
					data:formData,
					type:'post',//HTTP请求类型
					timeout:30000,//超时时间设置为30秒；
					headers:{'Content-Type':'application/json'},//{'Content-Type':'application/json'},'Content-Type':'application/x-www-form-urlencoded'	              
					success:function(result){
						plus.nativeUI.closeWaiting();
						//服务器返回响应，根据响应结果，分析是否登录成功；
						console.log(JSON.stringify(result));
						if(result.ResultType != 0){
							mui.toast(result.Content);
							return;
						}
						mui.toast("保存数据成功！");
						plus.webview.currentWebview().close();
					},
					error:function(xhr,type,errorThrown){
						plus.nativeUI.closeWaiting();
						//异常处理；
						console.log(type);
						mui.toast("加载数据异常！");
					}
				});
				
				
			}
			//重写返回逻辑
			mui.back = function() {
				var self = plus.webview.currentWebview();
				self.close();
			}
		</script>
	</body>

</html>